<template>
  <div class="function-add-function">
    <je-modal
      v-model:visible="isShow"
      width="460px"
      height="700px"
      :resize="false"
      :maximizable="false"
      :title="valueType == 'FUNC' ? '功能添加' : '集合添加'"
      cancel-button
      :ok-button="onSubmit"
      @close="onCancel"
    >
      <je-form layout="vertical" :model="formState" autocomplete="off">
        <je-form-item label="名称" v-bind="validateInfos.FUNCINFO_FUNCNAME">
          <je-input v-model:value="formState.FUNCINFO_FUNCNAME" placeholder=""> </je-input>
        </je-form-item>
        <je-form-item label="编码" v-bind="validateInfos.FUNCINFO_FUNCCODE">
          <je-input v-model:value="formState.FUNCINFO_FUNCCODE" placeholder=""> </je-input>
        </je-form-item>
        <je-form-item label="功能类型" v-bind="validateInfos.FUNCINFO_FUNCTYPE">
          <je-select
            v-model:value="formState.FUNCINFO_FUNCTYPE"
            placeholder=""
            :allow-clear="false"
            :options="ADD_MODLE_FUNCTION_TYPE"
            @change="handleChange"
          >
          </je-select>
        </je-form-item>

        <component
          :is="activeModal"
          ref="childrenRef"
          :type="formState.FUNCINFO_FUNCTYPE"
          @childFormData="childFormData"
        ></component>
      </je-form>
    </je-modal>
  </div>
</template>

<script>
  import { ref, defineComponent, reactive, toRefs } from 'vue';
  import { Input, Select, Modal, Form } from '@jecloud/ui';
  import { ADD_MODLE_FUNCTION_TYPE } from '@/helper/constant';
  import { FUNCTION_MODULES } from '@/helper/compontents';
  import { AddChildFunction } from '@/api/index';
  import { formRules } from '@/helper/regular';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'FunctionAddModal',
    components: {
      JeSelect: Select,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeModal: Modal,
      ...FUNCTION_MODULES.ADD_FUNCTION_TYPE,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      record: {
        type: Object,
        default: () => {
          return {};
        },
      },
      value: {
        type: String,
        default: '',
      },
    },
    emits: ['changeModal', 'refreshChildData'],
    setup(props, { emit }) {
      const state = {
        childrenRef: ref(null),
        isShow: ref(props.visble),
        valueType: ref(props.value), // 因为功能和集合页面是一样的，所以通过类型来做判断
        recordData: ref(props.record), //父组件传过来的node数据
        formState: reactive({
          FUNCINFO_FUNCCODE: '',
          FUNCINFO_FUNCNAME: '',
          FUNCINFO_FUNCTYPE: 'PT',
        }),
        activeModal: ref('FunctionAdd'), //默认显示的是功能添加
      };
      const rulesRef = {
        ...formRules(),

        FUNCINFO_FUNCTYPE: [
          {
            required: true,
            message: '该输入项为必填项',
          },
        ],
      };
      const { validateInfos, validate } = useForm(state.formState, rulesRef, {
        onValidate: (...args) => {},
      });

      //定义所有的方法
      const methods = {
        // 子组件的表单值及其校验是否必填
        childFormData(data) {
          Object.assign(state.formState, { ...data });
        },
        // 选择功能类型去获取对应的组件
        handleChange(value, { compontent }) {
          state.formState.FUNCINFO_FUNCTYPE = value;
          state.activeModal.value = compontent;
        },
        // 点击确定按钮
        onSubmit({ button }) {
          button.loading = true;
          const isTrue = state.formState.FUNCINFO_FUNCTYPE == 'PT';
          const params = {
            FUNCINFO_FUNCCODE: state.formState.FUNCINFO_FUNCCODE,
            FUNCINFO_FUNCNAME: state.formState.FUNCINFO_FUNCNAME,
            FUNCINFO_ICON:
              state.valueType.value != 'FUNC'
                ? 'jeicon jeicon-subfunction'
                : 'jeicon jeicon-function',
            FUNCINFO_NODEINFOTYPE: state.valueType.value, // FUNCFIELD || 'FUNC'
            FUNCINFO_FUNCTYPE: !isTrue ? state.formState.FUNCINFO_FUNCTYPE : 'FUNC',
            FUNCINFO_TABLENAME: state.formState.FUNCINFO_TABLENAME,
            FUNCINFO_PKNAME: state.formState.FUNCINFO_PKNAME,
            FUNCINFO_DBNAME: state.formState.FUNCINFO_DBNAME,
            FUNCINFO_PROCEDURE: state.formState.FUNCINFO_PROCEDURE,
            FUNCINFO_SQL: state.formState.FUNCINFO_SQL,
            FUNCINFO_FUNCREMARK: state.formState.FUNCINFO_FUNCREMARK,
            SY_PARENT: state.recordData.value.JE_CORE_FUNCINFO_ID,
            SY_STATUS: 1,
            FUNCINFO_CRUDTABLENAME: state.formState.FUNCINFO_CRUDTABLENAME,
            SY_LAYER: parseInt(state.recordData.value.layer) + 1,
          };
          Promise.all([validate(), state.childrenRef.value.validate()])
            .then(() => {
              AddChildFunction(params)
                .then((res) => {
                  button.loading = false;
                  Modal.message(res.message, 'success');
                  methods.onCancel();
                })
                .catch((err) => {
                  button.loading = false;
                  Modal.alert(err.message, 'error');
                });
            })
            .catch((err) => {
              console.log('error', err);
              button.loading = false;
            });

          return false;
        },
        onCancel() {
          state.isShow.value = false;
          emit('changeModal', state.isShow.value);
        },
      };
      return {
        ADD_MODLE_FUNCTION_TYPE: ref(ADD_MODLE_FUNCTION_TYPE),
        ...methods,
        rulesRef,
        validateInfos,
        ...toRefs(state),
      };
    },
  });
</script>
<style lang="less" scoped>
  .function-add-function {
    width: 100%;
    height: 100%;
    .header {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
<style lang="less">
  .function-add-function {
    .je-modal--wrapper .je-modal--content {
      &::-webkit-scrollbar {
        width: 0;
      }
    }
  }
</style>
